<template>
    <el-form :model="student.grades" ref="formRef">
        <el-form-item label="网站前端开发成绩：" prop="frontend">
            <el-input v-model="student.grades.frontend" type="number" :disabled="!canEditSubject('网站前端开发')"></el-input>
        </el-form-item>
        <el-form-item label="专业英语成绩：" prop="english">
            <el-input v-model="student.grades.english" type="number" :disabled="!canEditSubject('专业英语')"></el-input>
        </el-form-item>
        <el-form-item label="Python程序设计：" prop="python">
            <el-input v-model="student.grades.python" type="number" :disabled="!canEditSubject('Python 程序设计')"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="onCancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
    import { ref, computed } from 'vue'
    import { useUserStore } from '../stores/user';
    import { useMemberStore } from '../stores/member';

    const userStore = useUserStore()
    const memberStore = useMemberStore()

    const teacher = computed(() => memberStore.getUserByUsername(userStore.username))

    const props = defineProps({
        student: {
            type: Object,
            required: true
        }
    })

    const emit = defineEmits(['submit']);

    const formRef = ref(null);

    const onSubmit = () => {
        formRef.value.validate((valid) => {
            if (valid) {
                emit('submit');
            }
        });
    };
    const onCancel = () => {
        history.back();
    };

    const canEditSubject = (subject) => {
        return teacher.value?.subjects.includes(subject)
    }
</script>